<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>村组织活动信息</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/xinxiguanli/cunganbuxinxi.css">
    <link rel="stylesheet" href="../../fonts/xinxiguanli/font/iconfont.css">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../../mock/mock/mock-min.js"></script>
    <script type="text/javascript" src="../../mock/mock1.js"></script>

    <style>
        /* .layui-layer-setwin a {
            position: fixed;
            margin-left: 25px;
        } */
        
        .layui-layer-page .layui-layer-content {
            position: initial !important;
        }
        
        .layui-layer-dialog .layui-layer-content .layui-layer-ico {
            width: 16px !important;
        }
        
        body .layui-layer-dialog .layui-layer-content {
            position: initial !important;
        }
        
        .layui-layer-dialog .layui-layer-content .layui-layer-ico {
            top: 3px !important;
        }
        
        .chaxun {
            display: inline;
            width: 90%;
            margin-right: 20px;
        }
        
        .dignbuanniu {
            margin: 15px 0;
        }
        
        .dingbuyihang {
            padding: 0px 10px;
            width: 90%;
        }
        /*水平竖直居中  */
        
        .juzhong {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .xingzhengcunxinxitianjia {
            width: 60%;
        }
        
        .hanggao {
            margin: 40px 0px;
        }
        
        .xiangqingtitle {
            color: #999;
        }
        
        .xiangqingcontent {
            text-align: center;
            width: 50%;
        }
        
        .xiangqingjianjie {
            width: auto;
            text-align: left;
            text-indent: 40px;
            padding: 9px 40px;
        }
        
        .layui-layer-dialog .layui-layer-content .layui-layer-ico {
            position: initial !important;
        }
        
        img {
            height: 300px;
        }
    </style>
</head>

<body>
    <div style="padding: 20px; background-color: #f2f2f2;">
        <div class="layui-card layui-col-space15" style="padding: 20px; background-color: #fff;">
            <div class="layui-card-body">
                <!-- 顶部按钮 -->
                <form class="layui-form" action="" lay-filter="saixuan">
                    <div class="layui-row">

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn" onclick="tianjia()">
                        <i class="layui-icon layui-icon-addition"></i>&nbsp;&nbsp;添加
                      </button>
                        </div>

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn layui-btn-danger" onclick="shanchucheck()">
                        <i class="layui-icon layui-icon-delete"></i>&nbsp;&nbsp;删除
                      </button>
                        </div>

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu"></div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">
                            <label class="layui-form-label dingbuyihang">
                                <select id="qu1" name="areaId" lay-verify="required"  lay-filter="zhen1">
                                    <option value="">地区筛选(区/县)</option>
                                </select>
                            </label>
                        </div>

                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">
                            <label class="layui-form-label dingbuyihang">
                                <select id="zhen1" name="townid" lay-verify="required" name="townId" lay-filter="zhen1">
                                    <option value="">地区筛选(镇/街道)</option>
                                </select>
                            </label>
                        </div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">

                            <label class="layui-form-label dingbuyihang">
                        <select name="villageId" lay-verify="required" id="cun1" name="villageId">
                            <option value="">地区筛选(村)</option>
                        </select>
                            </label>
                        </div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">
                            <input type="text" name="keyWords" required lay-verify="required" placeholder="查询内容或字段" autocomplete="off" class="layui-input chaxun">
                        </div>
                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn" onclick="chaxun()">
                                <i class="layui-icon layui-icon-search"></i>&nbsp;&nbsp;查询
                              </button>
                        </div>

                    </div>
                </form>
                <div class="table">
                    <table id="demo" lay-filter="test"></table>
                </div>
                <!-- 底部上传按钮 -->
                <div class="kaoyou">
                    <button type="button" class="layui-btn" id="shangchuanwenjian">
                        上传  &nbsp;&nbsp; <i class="layui-icon layui-icon-upload"></i>
                         </button>
                    <a type="button" class="layui-btn" href="http://47.94.152.81:8082/Excel/villageactionTemplate" style="line-height: 38px;">
                        <i class="layui-icon layui-icon-download-circle"></i>&nbsp;&nbsp;下载模板
                    </a>
                </div>
            </div>
        </div>
    </div>

</body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" id="btn2" lay-event="edit" style="background-color: #1E9FFF;">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



<!-- 表格 -->
<script type="text/javascript">
    var table
    var option
    var form
    var laydate;
    var upload
    var tupian1 = []
    var wenjian = []
    layui.use(["upload", "laydate", "table", "jquery", "form"], function() {
            table = layui.table;
            form = layui.form;
            laydate = layui.laydate;
            upload = layui.upload;
            shangchuanxinxi()
            form.render();


            // 获取所有列表数据的参数
            option = {
                id: "biaoge1",
                url: url + "villageaction/query",
                elem: "#demo",
                page: true,
                title: "村会议",
                size: "lg",
                method: "post",
                limits: [10, 20, 50, 100, 200, 500],
                text: {
                    none: "本页暂无数据,请刷新页面", //默认：无数据。
                },
                headers: {
                    token: localStorage.getItem('token')
                },
                where: {

                },
                request: {
                    pageName: "currentPage", //页码的参数名称，默认：page
                    limitName: "size", //每页数据量的参数名，默认：limit
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                parseData: function(res) {
                    if (res.code == "401") {
                        window.parent.window.location.href = "../login/index.html"
                    }
                    //res 即为原始返回的数据
                    return {
                        code: 0, //解析接口状态
                        msg: res.msg, //解析提示文本
                        count: res.data.count, //解析数据长度
                        data: setdata(res.data.VillageActionList), //解析数据列表
                    };
                },
                cols: [
                    [{
                        field: 'chackbox',
                        type: 'checkbox',
                    }, {
                        title: '序号',
                        type: 'numbers',
                        width: '6%',
                        align: 'center',
                    }, {
                        field: 'time',
                        title: '会议时间',
                        sort: true,
                        align: 'center',
                        unresize: true
                    }, {
                        field: 'villagename',
                        title: '所属村',
                        align: 'center',
                        unresize: true
                    }, {
                        field: 'type',
                        title: '所属类型',
                        sort: true,
                        align: 'center',
                        unresize: true
                    }, {
                        field: 'name',
                        title: '活动名称',
                        sort: true,
                        align: 'center',
                        unresize: true
                    }, {
                        field: 'location',
                        title: '地点',
                        sort: true,
                        align: 'center',
                        unresize: true
                    }, {
                        field: 'caozuo',
                        title: '操作',
                        align: 'center',
                        toolbar: '#barDemo',
                        unresize: true
                    }, ]
                ],
            };
            console.log(table)
            console.log(option)
            tableIns = table.render(option);

            table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                console.log(obj)
                if (layEvent === 'detail') { //查看
                    //do somehing
                } else if (layEvent === 'del') { //删除
                    layer.open({
                        type: 1,
                        title: "删除",
                        offset: "auto",
                        content: `<div style="font-size: 14px; color: #606266;line-height: 100px;height: 92px;text-align: center;">确认要删除当前项吗!</div>`,
                        area: ["350px", "200px"],
                        btn: ["删除", "取消"], //可以无限个按钮
                        btn1: function() {
                            var data = {};
                            data.idList = []

                            data.idList.push(obj.data.villageAction.id)
                            console.log(data)
                            $.ajax({
                                url: url + "villageaction/del",
                                method: "post",
                                data: data,
                                traditional: true, //防止深度序列化
                                success: function(data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        table.reload("biaoge1", option);
                                        layer.msg('删除成功!')
                                    } else {
                                        layer.msg('删除失败!')
                                    }
                                },
                                error: function(err) {
                                    layer.msg('删除失败!')
                                },
                            });
                            layer.closeAll();
                        },
                        btn2: function() {
                            layer.msg("已取消操作");
                        },
                    });
                } else if (layEvent === 'edit') {
                    layer.open({
                        title: '编辑',
                        type: '0',
                        area: ["900px", "700px"],
                        //offset: ['100px', '450px'],
                        content: `<div class="juzhong">
    <form class="layui-form xingzhengcunxinxitianjia" id="shangchuan" lay-filter="bianji" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" lay-filter="qu">
                    <option value="">请输入所属区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" lay-filter="zhen">
                    <option value="">请输入所属镇</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属村</label>
            <div class="layui-input-block">
                <select id="cun" name="villageId" lay-verify="required" lay-filter="cun">
                    <option value="">请输入所属村</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属组</label>
            <div class="layui-input-block">
                <select id="zu" name="groupId" lay-verify="required" lay-filter="zu">
                    <option value="">请输入所属组</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动名称</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="hukouqianyi" value="` + obj.data.villageAction.name + `" name="name" required lay-verify="required" placeholder="请输入会议标题名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动类型</label>
            <div class="layui-input-block">
                <select id="huodongleixing" name="typeId" lay-verify="required" lay-filter="huodongleixing">
                    <option value="">请输入活动类型</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动时间</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="hukouqianyi" value=` + timezhuanhuan(obj.data.time) + ` name="time" id="shijian" required lay-verify="required" placeholder="请输入会议时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">活动地点</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="hukouqianyi" value=` + obj.data.location + ` name="location" required lay-verify="required" placeholder="请输入会议地点" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动内容</label>
            <div class="layui-input-block">
                <textarea name="content" id="huodongneirong" placeholder="请输入会议内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <div class="layui-upload" name="">
                    <div class="layui-upload" name="">
                        <button type="button" class="layui-btn" id="shangchuantupian">图片选择</button>
                        <button type="button" class="layui-btn" id="shangchuananniu">图片上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="tupianyuelan"></div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn bianji" lay-filter="bianji">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
    </form>
</div>`,
                        // btn: ['取消','确认'],
                        success: function() {
                                var tupianIndex = 0;
                                var tupianImg = []
                                var tupianJianSuo = []
                                    // 将图片赋空  然后赋值
                                tupian = []
                                tupian1 = []
                                var cunmaotu0 = JSON.parse(obj.data.villageAction.relatedDocuments);
                                // tupian1 = cunmaotu0

                                if (cunmaotu0 !== null) {
                                    for (var i = 0; i < cunmaotu0.length; i++) {
                                        console.log
                                        if (cunmaotu0[i] != "") {
                                            tupianImg[tupianIndex] = cunmaotu0[i]
                                            tupianIndex++
                                        }
                                    }
                                    cunmaotu0 = tupianImg
                                    tupian1 = cunmaotu0
                                }
                                if (cunmaotu0 !== null && cunmaotu0.length !== 0) {
                                    cunmaotu0.forEach((item, index) => {
                                        // $('#tupianyuelan').append(`<img onclick=quchutupian("` + item.url + `",this) src=" ` + item.url + `" class="layui-upload-img">`)
                                        $('#tupianyuelan').append(
                                            `<div class="layui-hide imgParent uploadDemoView">` +
                                            `<img onclick=quchutupian("` + item.url + `",this) src=" ` + item.url + `" class="layui-upload-img imgimg">` +
                                            `<div class="imgspan" >` +
                                            `<span class="iconfont icon-shanchu" data="` + index + `" style="color: #fff;"></span>` +
                                            `</div>` +
                                            `</div>`
                                        )
                                        tupianJianSuo.push(index);
                                        console.log(tupianJianSuo)
                                        layui.$('.uploadDemoView').removeClass('layui-hide');
                                    })
                                }
                                // 删除图片
                                $(".icon-shanchu").click(function() {
                                    console.log($(this).attr("data"));
                                    $(this).parents(".uploadDemoView").addClass('layui-hide');
                                    for (var i = 0; i < tupianJianSuo.length; i++) {
                                        if ($(this).attr("data") == tupianJianSuo[i]) {
                                            tupian1.splice(i, 1);
                                            tupianJianSuo.splice(i, 1);
                                        }
                                    }
                                    $(this).parents(".uploadDemoView").remove();
                                    console.log(tupian1)
                                    console.log(tupianJianSuo)
                                })

                                areas.forEach(item => {
                                    $('#qu')[0].innerHTML += `<option value="` + item.id + `">` + item.name + `</option>`
                                })
                                towns.forEach(item => {
                                    $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                })
                                villages.forEach(item => {
                                    $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                })

                                var bianjiqu = ""
                                    // 1.区选择
                                form.on('select(qu)', function(data) {
                                    bianjiqu = data.value
                                    $('#zhen').empty()
                                    $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                                    towns.forEach(item => {
                                        if (item.areaId == data.value) {
                                            $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                        }
                                    })
                                    form.render('select', "bianji")
                                });
                                // 2.镇监听
                                form.on('select(zhen)', function(data) {
                                    $('#cun').empty()
                                    $('#cun')[0].innerHTML += ` <option value="">请选择所属村</option>`
                                    villages.forEach(item => {
                                        if (item.townId == data.value) {
                                            $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                        }
                                    })
                                    form.render('select', "bianji")
                                });
                                form.on('select(cun)', function(data) {
                                        console.log(data.value)
                                        $('#zu').empty()
                                        $('#zu')[0].innerHTML += ` <option value="">请选择所属组</option>`

                                        if (data.value != "") {
                                            // 为组进行赋值
                                            var data1 = {}
                                            console.log(getvillage(data.value))
                                            data1.areaId = bianjiqu
                                            data1.townId = getvillage(data.value).townId
                                            data1.villageId = data.value
                                            console.log(data1)
                                            $.ajax({
                                                url: url + "group/querygroup",
                                                method: "get",
                                                data: data1,
                                                success: function(data) {
                                                    console.log(data)
                                                    data.data.group.forEach(item => {
                                                        $('#zu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                                    })
                                                    form.render('select', "bianji")
                                                },
                                                error: function(err) {
                                                    console.log(err)
                                                }
                                            })

                                            // 为村活动类型赋值
                                            var data1 = {}
                                            console.log(getvillage(data.value))
                                            data1.areaId = bianjiqu
                                            data1.townId = getvillage(data.value).townId
                                            data1.villageId = data.value
                                            console.log(data1)
                                            $.ajax({
                                                url: url + "villageactiontype/query",
                                                method: "post",
                                                data: data1,
                                                success: function(data) {
                                                    console.log(data)
                                                    data.data.villageActionTypeList.forEach(item => {
                                                        $('#huodongleixing')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                                    })
                                                    form.render('select', "bianji")
                                                },
                                                error: function(err) {
                                                    console.log(err)
                                                }
                                            })
                                        }
                                    })
                                    // 为组进行赋值
                                var data1 = {}
                                data1.areaId = bianjiqu
                                data1.townId = obj.data.villageAction.townId
                                data1.villageId = obj.data.villageAction.villageId
                                $.ajax({
                                    url: url + "group/querygroup",
                                    method: "get",
                                    data: data1,
                                    success: function(data) {
                                        console.log(data)
                                        data.data.group.forEach(item => {
                                            $('#zu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                        })
                                        $('#zu').val(obj.data.villageAction.groupId)
                                        form.render('select', "bianji")
                                    },
                                    error: function(err) {
                                        console.log(err)
                                    }
                                })

                                // 为党活动类型赋值
                                var data1 = {}
                                data1.areaId = bianjiqu
                                data1.townId = obj.data.villageAction.townId
                                data1.villageId = obj.data.villageAction.villageId
                                $.ajax({
                                    url: url + "villageactiontype/query",
                                    method: "post",
                                    data: data1,
                                    success: function(data) {
                                        console.log(data)
                                        data.data.villageActionTypeList.forEach(item => {
                                            $('#huodongleixing')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                        })
                                        $('#huodongleixing').val(obj.data.villageActionType.id)
                                        form.render('select', "bianji")
                                    },
                                    error: function(err) {
                                        console.log(err)
                                    }
                                })
                                $('#qu').val(obj.data.villageAction.areaId)
                                $('#zhen').val(obj.data.villageAction.townId)
                                $('#huodongneirong').val(obj.data.villageAction.content)
                                $('#cun').val(obj.data.villageAction.villageId)

                                form.render("select", "bianji");
                                $(".bianji").click(function() {
                                    var data1 = form.val("bianji");
                                    if (tupian1.length !== 0) {
                                        data1.relatedDocuments = JSON.stringify(tupian1)
                                    } else {
                                        data1.relatedDocuments = "[]"
                                    }
                                    data1.id = obj.data.villageAction.id;
                                    data1.time = shijianfuhaozhuanhua(data.time);
                                    console.log(data1);

                                    $.ajax({
                                        url: url + "villageaction/update",
                                        method: "post",
                                        data: data1,
                                        success: function(data) {
                                            console.log(data)
                                            if (data.code === 200) {
                                                layer.closeAll();
                                                table.reload("biaoge1", option);
                                                layer.msg('编辑成功!')
                                            } else {
                                                layer.msg(data.msg)
                                            }
                                        },
                                        error: function(err) {
                                            console.log(data)
                                            layer.msg('编辑失败!')
                                        },
                                    });
                                });
                                // 图片上传
                                upload.render({
                                    elem: '#shangchuantupian',
                                    url: url + 'upload',
                                    name: "files",
                                    data: {
                                        folderName: "Migrate"
                                    },
                                    headers: {
                                        token: localStorage.getItem('token')
                                    },
                                    field: "multipartFiles",
                                    auto: false,
                                    bindAction: "#shangchuananniu",
                                    multiple: true,
                                    before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                                        loading2 = layer.load(); //换了种风格
                                    },
                                    allDone: function(obj) { //当文件全部被提交后，才触发
                                        layer.close(loading2);
                                    },
                                    choose: function(obj) {
                                        var files = obj.pushFile();
                                        console.log(files)
                                        console.log(obj)
                                            //预读本地文件示例，不支持ie8
                                        obj.preview(function(index, file, result) {
                                            tupian.push(file)
                                                // $('#tupianyuelan').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                                            $('#tupianyuelan').append(
                                                `<div class="layui-hide imgParent uploadDemoView">` +
                                                `<img src="` + result + `" alt="` + file.name + `" class="layui-upload-img imgimg">` +
                                                `<div class="imgspan" >` +
                                                `<span class="iconfont icon-shanchu" data="` + tupianIndex + `" style="color: #fff;"></span>` +
                                                `</div>` +
                                                `</div>`
                                            )
                                            tupianIndex++
                                            layui.$('.uploadDemoView').removeClass('layui-hide');
                                            // 删除图片
                                            $(".icon-shanchu").click(function() {
                                                console.log($(this).attr("data"));
                                                $(this).parents(".uploadDemoView").addClass('layui-hide');
                                                for (var i = 0; i < tupianJianSuo.length; i++) {
                                                    if ($(this).attr("data") == tupianJianSuo[i]) {
                                                        tupian1.splice(i, 1);
                                                        tupianJianSuo.splice(i, 1);
                                                    }
                                                }
                                                $(this).parents(".uploadDemoView").remove();
                                                console.log(tupian1)
                                            })
                                        });
                                    },
                                    done: function(res, index, upload) {
                                        res.data = JSON.parse(res.data)
                                        console.log(res)
                                        if (res.code === 200) {
                                            res.data.forEach(item => {
                                                tupian1.push({
                                                    name: item.name,
                                                    url: item.url
                                                })
                                            })
                                        }
                                    },
                                    error: function(index, upload) {
                                        layer.msg("上传失败")
                                            //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                                    },

                                })
                            }
                            // shade: [0.5,'#000']
                    });
                }
            });

            //添加筛选条件
            // 区生成
            areas.forEach(item => {
                    // console.log($('#zhen1')[0].innerHTML)
                    $('#qu1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                // 镇生成
            towns.forEach(item => {
                    // console.log($('#zhen1')[0].innerHTML)
                    $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                // 村生成
            form.on('select(zhen1)', function(data) {
                $('#cun1').empty()
                $('#cun1')[0].innerHTML += ` <option value="">地区筛选(村)</option>`
                villages.forEach(item => {
                    if (item.townId == data.value) {
                        $('#cun1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                    }
                })
                form.render('select', "saixuan")
            });
            // 1.区选择
            form.on('select(qu1)', function(data) {
                $('#zhen1').empty()
                $('#zhen1')[0].innerHTML += `    <option value="">地区筛选(区/县)</option>`
                towns.forEach(item => {
                    if (item.areaId == data.value) {
                        $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                    }
                })
                form.render('select', "saixuan")
            });
            form.render('select', "saixuan")
        })
        // 预处理
    function setdata(data) {
        console.log(data)
        data.forEach(item => {
            item.time = timezhuanhuan(item.villageAction.time)
                // item.townname = gettown(item.villageAction.townId).name
            item.villagename = getvillage(item.villageAction.villageId).name
            item.type = item.villageActionType.name
            item.name = item.villageAction.name
            item.location = item.villageAction.location
            item.createdAt = timezhuanhuan(item.createdAt)
        })
        return data
    } // 设置查询刷新列表
    function chaxun() {
        var data = form.val("saixuan");
        console.log(data)
        option.where.areaId = data.areaId
        option.where.townId = data.townid
        option.where.villageId = data.villageId
        option.where.name = data.keyWords
        console.log(option.where)
        table.reload("biaoge1", option);
    }

    function tianjia() {
        layer.open({
            title: '<div class="title">添加</div>',
            type: 1,
            area: ["900px", "700px"],
            // offset: ['100px','450px'],
            content: `
<div class="juzhong">
    <form class="layui-form xingzhengcunxinxitianjia" id="shangchuan" lay-filter="tianjia" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" lay-filter="qu">
                    <option value="">请输入所属区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" lay-filter="zhen">
                    <option value="">请输入所属镇</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属村</label>
            <div class="layui-input-block">
                <select id="cun" name="villageId" lay-verify="required" lay-filter="cun">
                    <option value="">请输入所属村</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属组</label>
            <div class="layui-input-block">
                <select id="zu" name="groupId" lay-verify="required" lay-filter="zu">
                    <option value="">请输入所属组</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动名称</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="hukouqianyi" name="name" required lay-verify="required" placeholder="请输入会议标题名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动类型</label>
            <div class="layui-input-block">
                <select id="huodongleixing" name="typeId" lay-verify="required" lay-filter="huodongleixing">
                    <option value="">请输入活动类型</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动时间</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="hukouqianyi" name="time" id="shijian" required lay-verify="required" placeholder="请输入会议时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">活动地点</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="hukouqianyi" name="location" required lay-verify="required" placeholder="请输入会议地点" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">活动内容</label>
            <div class="layui-input-block">
                <textarea name="content" placeholder="请输入会议内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <div class="layui-upload" name="">
                    <div class="layui-upload" name="">
                        <button type="button" class="layui-btn" id="shangchuantupian">图片选择</button>
                        <button type="button" class="layui-btn" id="shangchuananniu">图片上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="tupianyuelan"></div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn tijiao" lay-filter="tijiao">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
    </form>
</div>
`,
            success: function() {
                var tupianIndex = 0;
                var tupianJianSuo = []
                    // 将图片赋空  然后赋值
                tupian = []
                tupian1 = []
                areas.forEach(item => {
                    $('#qu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                towns.forEach(item => {
                    $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                villages.forEach(item => {
                    $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })

                var tianjiaqu = ""
                    // 监听每一个选择框的选择事件
                    // 1.区选择
                form.on('select(qu)', function(data) {
                    tianjiaqu = data.value
                    $('#zhen').empty()
                    $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                    towns.forEach(item => {
                        if (item.areaId == data.value) {
                            $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        }
                    })
                    form.render('select', "tianjia")
                });
                // 2.镇监听
                form.on('select(zhen)', function(data) {
                    $('#cun').empty()
                    $('#cun')[0].innerHTML += ` <option value="">请选择所属村</option>`
                    villages.forEach(item => {
                        if (item.townId == data.value) {
                            $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        }
                    })
                    form.render('select', "tianjia")
                });
                form.on('select(cun)', function(data) {
                    console.log(data.value)
                    $('#zu').empty()
                    $('#zu')[0].innerHTML += ` <option value="">请选择所属组</option>`

                    if (data.value != "") {
                        // 为组进行赋值
                        var data1 = {}
                        console.log(getvillage(data.value))
                        data1.areaId = tianjiaqu
                        data1.townId = getvillage(data.value).townId
                        data1.villageId = data.value
                        console.log(data1)
                        $.ajax({
                            url: url + "group/querygroup",
                            method: "get",
                            data: data1,
                            success: function(data) {
                                console.log(data)
                                data.data.group.forEach(item => {
                                    $('#zu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                })
                                form.render('select', "tianjia")
                            },
                            error: function(err) {
                                console.log(err)
                            }
                        })

                        // 为村活动类型赋值
                        var data1 = {}
                        console.log(getvillage(data.value))
                        data1.areaId = tianjiaqu
                        data1.townId = getvillage(data.value).townId
                        data1.villageId = data.value
                        console.log(data1)
                        $.ajax({
                            url: url + "villageactiontype/query",
                            method: "post",
                            data: data1,
                            success: function(data) {
                                console.log(data)
                                data.data.villageActionTypeList.forEach(item => {
                                    $('#huodongleixing')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                })
                                form.render('select', "tianjia")
                            },
                            error: function(err) {
                                console.log(err)
                            }
                        })
                    }
                })

                form.render('select', "tianjia")
                    // 时间选择框
                    //执行一个laydate实例
                laydate.render({
                    elem: '#shijian' //指定元素
                });
                $(".tijiao").click(function() {
                    var data = form.val("tianjia");

                    if (tupian1.length !== 0) {
                        data.relatedDocuments = JSON.stringify(tupian1)
                    } else {
                        data.relatedDocuments = "[]"
                    }
                    data.id = 0;
                    data.areaId = areas[0].id;
                    console.log(data);
                    data.time = shijianfuhaozhuanhua(data.time)
                    if (data.codes != "") {
                        $.ajax({
                            url: url + "villageaction/add",
                            data: data,
                            method: "post",
                            success: function(data) {
                                console.log(data)
                                if (data.code === 200) {
                                    layer.closeAll();
                                    table.reload("biaoge1", option);
                                    layer.msg(data.msg)
                                } else {
                                    layer.msg(data.msg)
                                }
                            },
                            error: function(err) {
                                layer.msg("添加失败")
                            },
                        });
                    }
                });
                // 上传图片的
                upload.render({
                    elem: '#shangchuantupian',
                    url: url + 'upload',
                    name: "files",
                    data: {
                        folderName: "Migrate"
                    },
                    headers: {
                        token: localStorage.getItem('token')
                    },
                    field: "multipartFiles",
                    auto: false,
                    bindAction: "#shangchuananniu",
                    multiple: true,
                    before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                        loading2 = layer.load(); //换了种风格
                    },
                    allDone: function(obj) { //当文件全部被提交后，才触发
                        layer.close(loading2);
                    },
                    choose: function(obj) {
                        //将每次选择的文件追加到文件队列
                        var files = obj.pushFile();

                        console.log(files)
                        console.log(obj)
                            //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result) {
                            // $('#tupianyuelan').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                            $('#tupianyuelan').append(
                                `<div class="layui-hide imgParent uploadDemoView">` +
                                `<img src="` + result + `" alt="` + file.name + `" class="layui-upload-img imgimg">` +
                                `<div class="imgspan" >` +
                                `<span class="iconfont icon-shanchu" data="` + tupianIndex + `" style="color: #fff;"></span>` +
                                `</div>` +
                                `</div>`
                            )
                            tupianJianSuo.push(tupianIndex);
                            tupianIndex++
                            layui.$('.uploadDemoView').removeClass('layui-hide');
                            // 删除图片
                            $(".icon-shanchu").click(function() {
                                console.log($(this).attr("data"));
                                $(this).parents(".uploadDemoView").addClass('layui-hide');
                                for (var i = 0; i < tupianJianSuo.length; i++) {
                                    if ($(this).attr("data") == tupianJianSuo[i]) {
                                        tupian1.splice(i, 1);
                                        tupianJianSuo.splice(i, 1);
                                        delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                                    }
                                }
                                $(this).parents(".uploadDemoView").remove();
                                console.log(tupian1)
                            })
                        });
                    },
                    done: function(res, index, upload) {
                        res.data = JSON.parse(res.data)
                        console.log(res)
                        if (res.code === 200) {
                            res.data.forEach(item => {
                                tupian1.push({
                                    name: item.name,
                                    url: item.url
                                })
                            })
                        }
                    },
                    error: function(index, upload) {
                        layer.msg("上传失败")
                            //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                    },

                })
                $("#shijian").blur(function() {
                    $("#times").empty();
                    var time = $(this).val();
                    if (time == "" || time == null) {
                        $("#shijian").after("<span id='times' style='color: red;font-size:12px;margin-left:20px;'>活动时间不能为空</span>");
                    }
                });
            }

        });
    }
    // 根据上面的删除check选中的进行删除
    function shanchucheck() {
        var checkStatus = table.checkStatus("biaoge1"); //idTest 即为基础参数 id 对应的值
        console.log(checkStatus.data); //获取选中行的数据
        var data = {}
        data.idList = [];
        checkStatus.data.forEach((item) => {
            data.idList.push(item.villageAction.id);
        });
        console.log(data)
        if (data.idList.length !== 0) {
            $.ajax({
                url: url + "villageaction/del",
                method: "post",
                data: data,
                traditional: true, //防止深度序列化
                success: function(data) {
                    if (data.code === 200) {
                        layer.closeAll();
                        table.reload("biaoge1", option);
                        layer.msg("删除成功")
                    } else {
                        layer.msg('删除失败')
                    }
                    console.log(data);

                },
                error: function(err) {},
            });
        } else {
            layer.msg('请选择本页要删除的项')
        }
    }
    // 上传信息
    function shangchuanxinxi() {
        // 文件
        upload.render({
            elem: '#shangchuanwenjian',
            url: '',
            multiple: false,
            method: 'post',
            accept: 'file',
            auto: false,
            bindAction: "#12343213123",
            headers: {
                token: localStorage.getItem('token')
            },
            before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                loading2 = layer.load(); //换了种风格
            },
            choose: function(obj) {
                var formData = new FormData();
                obj.preview(function(index, file, result) {
                    formData.append('file', file)
                    console.log(formData.get('file'))
                    $.ajax({
                        url: url + 'Excel/villageactionUpload',
                        method: "post",
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            if (data.code === 0) {
                                layer.msg(data.msg)
                                table.reload("biaoge1", option);
                            } else {
                                layer.msg(data.msg)
                            }
                        },
                        error: function(err) {
                            console.log(err)
                        }
                    })
                });

            },
        })
    }
</script>



</html>